<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>基本柱状图应用 - 基于HTML5 jqChart图表插件</title>
		<link rel="stylesheet" type="text/css" href="css/jquery.jqChart.css" />
		<link rel="stylesheet" type="text/css" href="css/jquery.jqRangeSlider.css" />
		<link rel="stylesheet" type="text/css" href="themes/smoothness/jquery-ui-1.8.21.css" />
		<script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
		<script src="js/jquery.jqChart.min.js" type="text/javascript"></script>
		<script src="js/jquery.jqRangeSlider.min.js" type="text/javascript"></script>
		<!--[if IE]><script lang="javascript" type="text/javascript" src="js/excanvas.js"></script><![endif]-->
		<script lang="javascript" type="text/javascript">
			$(document).ready(function() {
				$('#jqChart').jqChart({
					title: {
						text: '柱状图应用 - 坐标轴设定'
					},
					axes: [{
						location: 'left',
						minimum: 10,
						maximum: 100,
						interval: 10
					}],
					series: [{
						type: 'column',
						title: '柱状图数据',
						data: [
							['a', 70],
							['b', 40],
							['c', 85],
							['d', 50],
							['e', 25],
							['f', 40]
						]
					}]
				});
			});
		</script>
	</head>

	<body>
		<div>
			<h3> 基于jqChart图表插件的基本柱状图应用</h3>
			<div id="jqChart" style="width: 500px; height: 300px;">
			</div>
		</div>
	</body>

</html>